import React, { useEffect, useState, useRef }  from "react";
import {useNavigate, useSearchParams} from "react-router-dom";
import {Button, Form, Input, Spin, Switch,Upload} from "antd";
import ImgCrop from 'antd-img-crop'
import { ArrowLeftOutlined } from "@ant-design/icons";
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import ContentLayout from "../../../components/layout/ContentLayout";
import {Common_rules,Image_rules} from "../../../config/formRules";
import { useFormData }  from '../../../hooks/form/useFormData'
import './detail.css'
import { modules } from '../../../config'
const NewsDetail = () => {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const editorRef = useRef(null);
    const [searchParams] = useSearchParams()
    const [quillValue, setQuillValue] = useState('');
    const handleGoBack = () => {
        navigate('/news')
    }
    const pageInfo = {
        page: searchParams.get('page'),
        pageKid: searchParams.get('id')
    }
    const onPreview = async (file) => {
        let src = file.url;
        if (!src) {
            src = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow?.document.write(image.outerHTML);
    };
    const handleBeforeUpload = () => {
        return false
    }
    const handleUploadChange = ({file,fileList: newFileList}) => {
        setFileList(newFileList)
        form.setFieldValue('file', file)
    }
    const handleChange = content => {
        // console.log(event,editor.getData())
        // setQuillValue(quillContent)
        form.setFieldValue('content', content)
    }
    const [fileList, setFileList] = useState([])
    const { handleSave,getData, viewLoading, loading } = useFormData({ form, formUrl: 'news',backCb: handleGoBack,pageInfo, keyName: 'newsid',setFileList })
    useEffect(() => {
        const id = searchParams.get('id')
        id && getData(id)
    },[searchParams])
    return (
        <div style={{ height: '100%',width: '100%' }}>
            <ContentLayout
                searchComp={
                    <div className="back-btn">
                        <Button onClick={handleGoBack} type={"primary"} icon={<ArrowLeftOutlined />}>返回</Button>
                    </div>
                }
                mainComp={
                    <div className="detail-main">
                        <Spin wrapperClassName="spin-content" spinning={viewLoading} >
                            <Form
                                disabled={pageInfo.page === 'view'}
                                form={form}
                                size={"large"}
                                labelCol={{
                                    span: 4,
                                }}
                                wrapperCol={{
                                    span: 10,
                                }}
                                layout="horizontal"
                                style={{
                                    width: '100%',
                                }}
                            >
                                <Form.Item rules={Common_rules} name="title" label="标题">
                                    <Input />
                                </Form.Item>
                                    <Form.Item rules={Common_rules} name="author" label="作者">
                                        <Input />
                                    </Form.Item>
                                <Form.Item wrapperCol={12} className="quill" rules={Common_rules} name="content" label="内容">
                                    <ReactQuill readOnly={ pageInfo.page === 'view' } modules={modules} placeholder="请输入您的内容..." theme="snow" value={quillValue} onChange={handleChange} />
                                </Form.Item>
                                <Form.Item rules={Image_rules} name="file" label="封面">
                                    <ImgCrop rotationSlider>
                                        <Upload
                                            fileList={fileList}
                                            className="upload"
                                            autoUpload={false}
                                            beforeUpload={handleBeforeUpload}
                                            onChange={handleUploadChange}
                                            onPreview={onPreview}
                                            maxCount={1}
                                            listType="picture-card"
                                        >
                                            上传封面
                                        </Upload>
                                    </ImgCrop>
                                </Form.Item>
                                <Form.Item name="status" label="是否发布" valuePropName="checked">
                                    <Switch checkedChildren="是" unCheckedChildren="否" />
                                </Form.Item>
                            </Form>
                        </Spin>
                    </div>
                }
                footerComp={
                    <div className="footer-btns">
                        <Button className="btn" onClick={handleGoBack}>取消</Button>
                        { pageInfo.page !=='view' && <Button  type={"primary"} loading={loading} onClick={handleSave}>提交</Button>}
                    </div>
                }
            />
        </div>
    )
}

export default NewsDetail
